<template>
	<view class="openDoor">
		<u-cell-group>
			<u-field :label-width='120' label="门名称" disabled v-model="form.DoorName">
			</u-field>
			<u-field :label-width='120' label="SN" disabled v-model="form.SN">
			</u-field>
			<u-field :label-width='120' label="安装位置" disabled v-model="form.LctnName">
			</u-field>
			<u-field label="在线状态" label-width='120' disabled v-model="form.zx">
			</u-field>
		</u-cell-group>

		<view style="text-align: center;margin-top: 100rpx;">
			<image style="width: 400rpx;height: 400rpx;" :src="img" @touchstart="gotouchstart" @touchend="gotouchend"></image>
			<view style="width: 60%;height: 120rpx;line-height: 120rpx;background-color: #19BE6B;margin-left: 20%;" @click="checkrecove">
				查看记录
			</view>
		</view>

		<u-mask :show="maskshow">
			<view class="warp">
				<view  class="rect" @tap.stop>
					<u-loading mode="flower" size="90"></u-loading>
					<view style="font-size: 25rpx; text-align: center;color: #ECF5FF;">
						正在开门
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import img from '../../static/image/remotedoor_on_bg.png';
	import img1 from '../../static/image/remotedoor_off_bg.png'
	import http from '../../common/vmeitime-http/index.js';
	export default {
		data() {
			return {
				img: img,
				maskshow: false,
				form: null
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(); //打印出上个页面传递的参数。
			this.form = JSON.parse(option.item);
			if (this.form.Online) {
				this.form.zx = '在线'
			} else {
				this.form.zx = '离线'
			}
		},
		methods: {
			gotouchstart() {
				console.log(1)
				this.img = img1;


			},
			gotouchend() {
				console.log(2)
				this.img = img;
				this.maskshow = true;
				http.OpenDoor({
					DoorID: this.form.DoorID,
					CustomerID: this.form.CustomerID
				}).then(res => {
					this.maskshow = false;
					if(res.data.result==1){
						uni.showToast({
						    title: '开门成功',
						    duration: 2000,
							icon:"none"
						});
					}else{
						uni.showToast({
						    title: '开门失败',
						    duration: 2000,
							icon:"none"
						});
					}
				}).catch(err => {
					this.maskshow = false;
					uni.showToast({
					    title: '开门失败',
					    duration: 2000,
						icon:"none"
					});
				})
			},
			checkrecove(){
				console.log(123);
				uni.navigateTo({
					url:`../DoorListRecover/DoorListRecover?id=${this.form.DoorID}&cid=${this.form.CustomerID}&LctnName=${this.form.LctnName}&DoorName=${this.form.DoorName}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.openDoor {
		width: 700rpx;
		height: 100%;
		margin-left: 25rpx;
		padding-top: 10px;
		box-sizing: border-box;

		.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
		}

		.rect {
			width: 120rpx;
			height: 120rpx;
			text-align: center;
		}
	}
</style>
